<template>
	<view style="height: 100%;display: inline;">
		<view style="width:100%;height:40rpx;background-color: #6db2ef;"></view>

		<view class="search-wrap">
			<u-search placeholder="输入公司名称、职位名称" bg-color="#e8eaec" :show-action = "false" :value="value" @change="change" @clear="clear"
			 @search="search">
			</u-search>
		</view>

		//历史记录
		<view v-if="showHistory" style="margin-top: 80rpx;">
			<text style="padding: 40rpx 24rpx;color: #999999;">搜索历史</text>
			<view class="tag" style="padding: 30rpx;">
				<view style="margin: 0 16rpx 32rpx 0;" v-for="(item, index) in tagList">
					<u-tag :text="item" bg-color="#eee" border-color="#eee" color="#666" type="info" @click="tagClick" :index="index" />
				</view>
			</view>
		</view>

		<view v-else style="height: 100%;">
			<view class="category">
				<view class="bg_gray" @click="address">
					<text style="color: #999999;font-size: 24rpx;">区域位置</text>
					<image class="icon" src="../../../static/uview/common/down_gray.png" mode=""></image>
				</view>
				<view class="bg_gray" style="margin: 0 16rpx;" @click="position">
					<text style="color: #999999;font-size: 24rpx;">职位</text>
					<image class="icon" src="../../../static/uview/common/down_gray.png" mode=""></image>
				</view>
				<view class="bg_gray">
					<text style="color: #999999;font-size: 24rpx;" @click="filter">筛选</text>
					<image class="icon" src="../../../static/uview/common/down_gray.png" mode=""></image>
				</view>
			</view>
			<view class="wrap">
				<swiper class="swiper-box">
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="width: 100%;height: 100%;" @scrolltolower="reachBottom">
							<view class="page-box">
								<view class="job" v-for="(res, index0) in jobList" :key="res.id">
									<view class="box" @click="godetail(res)">
										<view>
											<text class="title">{{res.name}}</text>
											<text class="salary">{{res.wage}}</text>
										</view>
										<text class="company">{{res.customer}}</text>
										<view v-if="res.welfareTags||res.has_reward=='y'" style="display: flex;flex-direction: row;margin-top: 16rpx;">
											<view v-if="res.has_reward=='y'" class="reward_tag">
												<image src="../../../static/uview/findjob/reward_tag.png" style="width: 26rpx;height: 26rpx;"></image>
												<text style="font-size: 24rpx;color: #FA3534;white-space: nowrap;margin-left: 6rpx;">悬赏1234元</text>
											</view>
											<view class="tag">
												<view v-for="(item, index) in res.welfareTags">
													<u-tag v-if="index<3" style="padding: 6rpx" :text="item" bg-color="#eee" border-color="#eee" color="#666" type="info" />
												</view>
											</view>
										</view>
									</view>
									<view class="divid_line"></view>
								</view>
								<!-- <u-loadmore :status="nomore" bgColor="#f2f2f2"></u-loadmore>	 -->
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<u-picker> </u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				params: {
					"status":"active",
					"publish_status":"active"
				},
				wageTypes:{"monthly":"月","daily":"日","hourly":"时","annual":"年"},
				showHistory: true,
				tagList: [],
				jobList: [],
			}
		},
		methods: {
			search(e) { //
				console.log("search", e)
				if(e){
					this.refreshTag(e )
					this.params.search = e
					this.updateJobList()
				}
			},
			updateJobList(){
				const _self = this
				this.$u.api.getJobList(_self.params).then(res => {
						_self.jobList = _self.handleData(res.items);
						console.log(res);
					})
			},
			handleData(data){//处理数据
				if(data&&data.length>0){
					for (var i = 0; i < data.length; i++) {
						if("negotiable"==data[i].wage_type){
							data[i].wage = "面议"
						}else if("fixed-monthly"==data[i].wage_type){
							data[i].wage = data[i].upper_salary+ "/月"
						}else{
							data[i].wage = data[i].lower_salary+"-"+data[i].upper_salary+"/"+this.wageTypes[data[i].wage_type]
						}
						
						if(data[i].welfares){
							data[i].welfareTags = data[i].welfares.split(",")
						}
					}
				}
				return data
			},
			change(e) { //输入框内容发生变化时触发
				console.log(e);
				this.value = e
				if (e) {
					this.showHistory = false;
				} else {
					this.showHistory = true;
				}
			},
			clear(e) {

			},
			tagClick(e) {
				console.log(e)
				this.value = this.tagList[e]
				this.refreshTag(this.value)
				this.updateJobList()
			},
			godetail(e) {
				console.log(e)
				this.$u.route({url:'/pages/findjob_sub/jobDetail/jobDetail',
					params:{
						id:e.id,
						wage:e.wage,
						welfareTags:e.welfareTags?e.welfareTags.toString():""
					}
				})
			},
			address() { //区域地址
				this.$u.route('/pages/findjob_sub/address/address');
			},
			position() { //职位
				this.$u.route('/pages/findjob_sub/position/position');
			},
			filter() { //筛选
				this.$u.route('/pages/findjob_sub/filter/filter');
			},
			refreshTag(e){
				
				this.tagList.push(e)
				this.tagList.reverse()
				let resultarr = [...new Set(this.tagList)]
				console.log("resultarr",resultarr)
				this.tagList = resultarr
			}
		}
	}
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #fff;
	}

	/* #endif */
</style>
<style lang="scss" scoped>
	.search-wrap {
		width: 100%;
		height: 120rpx;
		position: fixed;
		background-color: #FFFFFF;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 30rpx;
		top: 16rpx;

		u-search {}
	}

	.tag {
		display: flex;
		flex-wrap: wrap; //可换行
		width: 100%;
	}

	.category {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin-top: 80rpx;
		height: 90rpx;
		padding: 24rpx 30rpx;

		.icon {
			width: 14rpx;
			height: 10rpx;
			margin-left: 10rpx;
		}

		.bg_gray {
			background: linear-gradient(180deg, #FDFDFE 0%, #F9FAFC 100%);
			border-radius: 4px;
			border: 1px solid #EEEEEE;
			padding: 2rpx 4rpx;
			height: 48rpx;
		}
	}

	.wrap {
		height: 100%;

		.swiper-box {
			flex: 1;
			height: 100%;
		}

		.swiper-item {
			height: 100%;
		}

		.job {
			background-color: #FFFFFF;

			.box {
				padding: 30rpx;
				display: flex;
				flex-direction: column;
			}

			.title {
				max-width: 480rpx;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				color: #333333;
			}

			.salary {
				float: right;
				color: #ff5229;
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
			}

			.company {
				font-size: 26rpx;
				color: #666;
				margin-top: 20rpx;
			}

			.tag {
				display: flex;
				flex-direction: row;
				width: 100%;
				height: 32rpx;
				margin-top: 16rpx;
			}
		}
	}
	
	.divid_line {
			margin: 0 30rpx;
			height: 2rpx;
			background-color: #f2f2f2;
		}
</style>
